<div>
    <div class="breadcrumb">
        <a class="prev" onclick="history.go(-1)"></a>
        <a class="next" onclick="history.go(1)"></a>
    </div>
    <div class="tab-head" >
            <div >
                <label>{{'agency.name'|translate}}</label>
                <input nz-input style="width: 120px;" [(ngModel)]="page.name" placeholder="{{'agency.name'|translate}}{{'placeholder.search'|translate}}" />
            </div>
            <div >
                <label>{{'agency.area'|translate}}</label>
                <nz-select style="width: 150px;" [(ngModel)]="page.areaId" nzPlaceHolder="{{'agency.area'|translate}}{{'placeholder.search'|translate}}">
                    <nz-option nzLabel="{{'agency.allArea'|translate}}" nzValue=""></nz-option>
                    <nz-option *ngFor="let i of areaList" [nzLabel]="i.name" [nzValue]="i.id"></nz-option>
                </nz-select>
            </div>
            <div >
                <label>{{'agency.createTime'|translate}}</label>
                <nz-range-picker [(ngModel)]="dateRange" style="width: 240px;" [nzPlaceHolder]="[language.timestart,language.timeover]" (ngModelChange)="onChange($event)"></nz-range-picker>
            </div>
            <div >
                <button nz-button class="noradius" nzType="primary" (click)="searchList()">{{'placeholder.search'|translate}}</button>
            </div>
    </div>
    <div class="tab-title">
        {{'agency.listTitle'|translate}}
        <a routerLink="/basicSetting/travelAgencyAdd">{{'agency.addAgency'|translate}}</a>
    </div>
    <nz-table class="medical-table" #columnTable [nzTotal]="page.pages" [nzPageIndex]="page.pageNo" nzPageSize="10" (nzPageIndexChange)="changeCurrentPage($event)" [nzSize]='small' [nzFrontPagination]="false" [nzLoading]="tableLoading"
        [nzData]="dataList">
        <thead>
            <tr>
                <th nzAlign="center">{{'agency.id'|translate}}</th>
                <th nzAlign="center">{{'agency.createTime'|translate}}</th>
                <th nzAlign="center">{{'agency.name'|translate}}</th>
                <th nzAlign="center">{{'agency.area'|translate}}</th>
                <th nzAlign="center">{{'agency.starLevel'|translate}}</th>
                <th nzAlign="center">{{'agency.followCount'|translate}}</th>
                <th nzAlign="center">{{'agency.serviceCount'|translate}}</th>
                <th nzAlign="center">{{'agency.status'|translate}}</th>
                <th nzAlign="center">{{'cz.title'|translate}}</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of columnTable.data">
                <td nzAlign="center">{{ data.id }}</td>
                <td nzAlign="center">{{ data.createTime }}</td>
                <td nzAlign="center">{{ data.name }}</td>
                <td nzAlign="center">{{ data.areaName }}</td>
				<td nzAlign="center">{{ data.starLevel}}{{'agency.star'|translate}}</td>
				<td nzAlign="center">{{ data.followCount}}</td>
				<td nzAlign="center">{{ data.serviceCount}}</td>
                <td nzAlign="center">
                    <nz-tag *ngIf="data.status === 'N'" [nzColor]="'#f50'">{{'agencyStatus.N'|translate}}</nz-tag>
                    <nz-tag *ngIf="data.status === 'Y'" [nzColor]="'#87d068'">{{'agencyStatus.Y'|translate}}</nz-tag>
                </td>
                <td nzAlign="center"><a routerLink="/basicSetting/travelAgencyDetail" [queryParams]="{ id : data.id}">{{'cz.detail'|translate}}</a><a routerLink="/basicSetting/travelAgencyAdd" [queryParams]="{ id : data.id}">{{'cz.edit'|translate}}</a></td>
            </tr>
        </tbody>
    </nz-table>
</div>